<style lang="less" scoped>
/* 文字溢出隐藏并显示省略号 */
.textfont{
  width: 200px;
  height: 40px;
  /* height: 100%; */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:2; /* 设置行数 */
	-webkit-box-orient:vertical;
}
.nameandprice{
    display: flex;
    justify-content: space-between;
}
.detailModelCss{
  // position: absolute;
  // left:100px;
  // right:100px;
  // top:100px;
  // bottom:100px;
  // z-index: 1001;
  background-color: white;
  // box-shadow: 3px 3px 5px #888888;
  // overflow-y: scroll;
  
}
.flexColumn{
  display: flex;
  flex-direction: column;
  .flexRow{
    display: flex;
  }
}
.img{
  width: 100px;
  height: 80px;
  object-fit: cover;
  -o-object-fit: cover;
}
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.avatar-uploader img {
  width: 128px;
  height: 128px;
}
</style>
<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-radio-group v-model="queryParam.status" @change="changeStatus">
                  <a-radio value="">
                    全部
                  </a-radio>
                  <a-radio value="2">
                    回收站商品
                  </a-radio>
                  <a-radio value="1">
                    上架中商品
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="名称">
                <a-input v-model="queryParam.name" placeholder="请输入商品名称" @change="changename"/>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="供应链">
                <a-select v-model="queryParam.type" placeholder="请选择">
                  <a-select-option v-for="(item,index) in typeList" :key="index" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="供应商">
                <a-select v-model="queryParam.supplier_id" placeholder="请选择">
                  <a-select-option v-for="(item,index) in supplierList" :key="index" :value="item.id">{{item.contacts}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd(1)" v-action:addyunbtn2>添加商品</a-button>
        <!-- <a-button type="primary" icon="plus" @click="handleAdd(2)" v-action:addyunbtn2>添加1688商品</a-button> -->
        <!-- 
        <a-button type="primary" icon="plus" @click="handleAdd('happly')" v-action:addyunbtn2>添加乐活游商品</a-button> -->
      </div>

      <s-table
        ref="table"
        size="default"
        :rowKey="(record,index)=>{return index}"
        :columns="columns"
        :data="loadData"
         showPagination="auto"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="goods" slot-scope="text, record, index">
          <div class="flexColumn">
            <div>{{record.name}}</div>
            <div class="flexRow margT6">
              <div>
                <img class="img" :src="record.image" alt="">
              </div>
              <div class="margL10">
                <div>
                  <a-tag color="#87d068">
                      {{record.type | filterType}}
                  </a-tag>
                  <a-tag :color="record.status==2?'#aa0000':'#ff5500'">
                      {{record.status==2?'下架中':'上架中'}}
                  </a-tag>
                  
                </div>
                <div class="margT4">
                  <span>价格：<span style="color:#ff8011">{{ record.specs }}￥</span></span>
                  <span class="margL10">库存：<span style="color:#6699CC">{{ record.stock }}</span></span>
                </div>
                <!-- <div>商品码：{{record.goodsCode}}</div> -->
                <div>
                  <span>
                    销量：<span style="color:#55ff00">{{record.nums||0}}</span>
                  </span>
                  <span class="margL10">
                    售卖总金额：<span style="color:#FF6600">{{ record.total||0 }}￥</span>
                  </span>
                </div>
                <div>
                  <span>
                    排序：{{record.sort}}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </span>
        <span slot="time" slot-scope="text, record, index">
          <!-- <div>有效期：{{ record.validDay }} 天</div> -->
          <div>上架时间：<br>{{ record.slaunch_time }} ~ {{ record.dlaunch_time }}</div>
          <div>抢购时间：<br>{{ record.srush_time }} ~ {{ record.drush_time }}</div>
          <div>过期时间：<br>{{ record.starttime }} ~ {{ record.endtime }}</div>
        </span>
        <span slot="provider" slot-scope="text, record, index">
          <div>{{ record.supplier_name }}</div>
          <!-- <div>{{ record.providerMobile }}</div> -->
        </span>
        <span slot="backBill" slot-scope="text, record, index">
          <div>是否可退单：<a-badge :status="record.is_refund==1?'success':'error'" />{{ record.is_refund==1?'是':'否'}}</div>
          <div v-if="record.is_refund==1" >退单手续费：{{ record.refund_fee }}%</div>
        </span>
        
        <!-- <span slot="avatar" slot-scope="text, record">
          <a-avatar :src="record.avatar" :size="54" style="margin-bottom:5px"/>
          <div>{{record.sexname}}</div>
          <div>{{record.name}}</div>
          <div>{{record.stu_id}}</div>
        </span> -->

        <span slot="action" slot-scope="text, record, index">
          <template>
            <div>
              <a @click="confirmUpOrDown(record,index)" v-action:updownbtn2>{{record.status==2?'上架':'下架'}}</a>
            </div>
            <div>
              <a @click="open(record)" v-action:detailyunbtn2>详情</a>
            </div>
            <div>
              <a-popconfirm
                v-action:deleteyunbtn2
                title="确定删除此商品吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirmDelete(record)"
              >
                <a>删除</a>
              </a-popconfirm>
            </div>
          </template>
        </span>
      </s-table>
    </a-card>
     
    <!-- 添加自营商品 -->
    <create-form-self
    v-if="CategoryData.length>0"
    :visible="visibleSelf"
    :model='model'
    :supplierList="supplierList"
    @cancel="cancel"/>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components';
// import CreateFormAngel from './components/CreateFormAngel';
import CreateFormSelf from './components/CreateFormSelf';
// import DetailForm from './components/DetailForm';

//已引入vuex
import { mapGetters,mapActions } from 'vuex'

//引入供应商模块的接口
import supplierApi from '@/api/supplier.js'

const columns = [
  {
    title: '编号',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '排序',
    dataIndex: 'sort',
  },
  // {
  //   title: '业务类型',
  //   dataIndex: 'type',
  // },
  // {
  //   title: '名称',
  //   dataIndex: 'name'
  // },
  // {
  //   title: '商品码',
  //   dataIndex: 'goodsCode',
  // },
  {
    title: '基本信息',
    scopedSlots: { customRender: 'goods' }
  },
  {
    title: '时间',
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '退单',
    scopedSlots: { customRender: 'backBill' }
  },
  {
    title: '供应商',
    scopedSlots: { customRender: 'provider' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width:'150px',
    scopedSlots: { customRender: 'action' }
  }
]
const list = {
  data: [
    {
      order: 1,
      type: '自营商品',
      name: '自营1',
      price: 100,
      count: 20,
      code: 'Xxz123456',
      duo: '0x159',
      xian: 20,
      isCanBackBill:1,
      shouxufei:'1',
      validDay:120,
      invalidDate: '2012/12/12',
      upTime:'2012/10/12',
      qBuyTime:'2012/10/12 12:00:00',
      providerName:'张三',
      providerMobile:'13958776325',
      goodsCode:'#12#78R',
      sell_num:100,
      sell_total_money:1000
    }
  ],
  pageSize: 10,
  pageNo: 1,
  totalPage: 6,
  totalCount: 2
}

export default {
  name: 'sydepartment',
  components: {
    STable,
    CreateFormSelf,
    // DetailForm
  },
  data () {
    this.columns = columns
    
    return {
      visible4detail:false,
      visibleAngel:false,
      visibleSelf:false,
      loadings: false,
      isShowDetailModel: false,
      dateFormat: 'YYYY/MM/DD',
      confirmLoading: false,
      model: {
        category_id:[]
      },
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        status: 1,
        supplier_id: localStorage.getItem('supplier_id')
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return this.$productApi.ProductPage(requestParameters).then(res => {
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      CategoryData:[],
      typeList:[]
    }
  },
  created() {
    //获取供应商列表
    if(this.supplierList.length<=0){
      this.getSupplirPage()
    }
    this.getCategoryRecursion()
  },
  computed:{
      ...mapGetters(['supplierList']),
  },
  mounted() {
    this.typeList = this.$myUtils.getTypeList;
    console.log('this.typeList',this.typeList)
  },
  methods: {
    ...mapActions(['SET_GOODS_TYPE','SET_GOODS_DETAIL_TAB_INDEX','GET_SUPPLIER_PAGE','SET_SPECTLIST']),
    changeStatus(val) {
      console.log("status",val)
      const status = val.target.value
      this.queryParam.status = status
      this.$refs.table.refresh(true)
    },
    changename(e) {
      this.queryParam.name = this.$myUtils.noTrim(this.queryParam.name)
    },
    // 查看详情
    open(e) {
      this.model = { ...e }
      this.SET_GOODS_TYPE(this.model.type)
      this.SET_GOODS_DETAIL_TAB_INDEX(1)
      this.SET_SPECTLIST([])
      // console.log("open————this.model",this.model)
      this.visibleSelf = true
      // 详情
      // this.visible4detail = true
      this.$forceUpdate()
    },
    handleAdd (type) {
      console.log("handleAdd————type",type)
      console.log("this.model",this.model)
      this.proudct_id = 0
      this.SET_GOODS_TYPE(type)
      this.visibleSelf = true
      this.SET_SPECTLIST([])
      // else{
      //   this.$message.info('该模块待开发中')
      // }
    },
    getProductPage() {
      const params = {
        pageNo:1,
        pageSize:15
      }
      this.$productApi.ProductPage(params).then(res => {
        console.log('res',res)
        this.loadData = res.data
      })
    },
    getCategoryRecursion() {
      const params = {
      }
      this.$productApi.CategoryRecursion(params).then(res => {
        if( res.ret == 200 ) {
          this.CategoryData = res.data == '未查询到数据'?[]:res.data
        }
      })
    },
    getSupplirPage() {
      const params = {
        pageNo:1,
        pageSize:1000
      }
      this.GET_SUPPLIER_PAGE(params)
    },
    // 确认上下架
    confirmUpOrDown(e,index) {
      console.log("index",index)
      const _this = this
      _this.$confirm({
        title: '系统提示',
        content: `确定${e.status==2?'上架':'下架'}此商品吗?`,
        cancelText: '取消',
        onOk () {
          // console.log("_this.loadData[index]",_this.loadData[index])
          _this.upOrDown(e,index)
        },
        onCancel () {}
      })
    },
    upOrDown(e,index) {
      let params = {
        id:e.id,
        status:e.status==2?1:2
      }
      this.$productApi.ProductSave(params).then(res=>{
        if(res.ret==200){
          this.$message.info('操作成功')
          this.$refs.table.refresh()
          // this.loadData[index].status = (e.status==2?1:2)
          // console.log('this.loadData',this.loadData)
          // this.$forceUpdate()
        }
      })
    },
    // 确认删除
    confirmDelete(e) {
      // const form = this.$refs.createModal.form
      console.log(e);
      this.$productApi.ProductDel({id: e.id}).then(res => {
        // 重置表单数据
        // form.resetFields()
        // 刷新表格
        this.$refs.table.refresh()
        this.$message.success('删除成功');
      }).catch(error => {
        console.log('-------------error------------', error)
      })
    },
    cancel(e) {
      this.model = {
        category_id:[],
        // is_status:[]
      }
      this.visibleSelf = false
      this.visibleAngel = false
      this.visible4detail = false
      // 刷新表格
      this.$refs.table.refresh()
      // this.$message.error('已取消');
    },
    // 重置
    reset () {
      // const form = this.$refs.createModal.form
      this.queryParam = {}
        // 重置表单数据
      // form.resetFields()
      // 刷新表格
      this.$refs.table.refresh()
    },
  },
}
</script>

